<div class="card ">
<div class="card-header" >
<h5><i class="fa fa-search text-primary" ></i>&nbsp;查询</h5><br/><br/>
		    <form class="form-inline">
					<b-input-group  key="sm" size="sm" class="mb-6" prepend="ID" >
					    <b-form-input v-model="ps.id" ></b-form-input>
					</b-input-group >
					&nbsp;&nbsp;
					<b-input-group key="sm" size="sm" class="mb-6" prepend="名称" >
					    <b-form-input v-model="ps.name"></b-form-input>
					    <b-input-group-append>
					      <b-button size="sm" text="Button" variant="outline-primary" @click="query" ><i class="fa fa-search"></i>查询</b-button>
					    </b-input-group-append>
					</b-input-group>
			</form>
</div>


<div class="card-block border border-primary border-bottom-0 border-right-0 border-left-0">
<!-- <div class="dt-responsive table-responsive"> -->
<div >


        <!-- responsive="true"  small   stacked="sm"  head-variant="light"   -->
		<b-table id="listTable"  ref="listTable" selected-variant="secondary"
		      :items="list"  :fields="fields"   class="table-7"
		       selectable  select-mode="range"  @row-selected="onRowSelected"  
		     hover  caption-top   stacked="sm"   > 
		      <template v-slot:table-caption>
			       <div class="mt-3" >
					    <b-button-group  size="sm">
					      <b-button variant="outline-success" @click="toAdd"     ><i class="fa fa-plus"></i>添加</b-button>
					      <b-button variant="outline-warning" @click="doRemove"  ><i class="fa fa-minus"></i>删除</b-button>
					    </b-button-group>
					    
			       </div>
		      </template>
              <template v-slot:head(index)>
                   <b-form-checkbox id="checkAll" @change="checkAll"></b-form-checkbox>
              </template>
              <template v-slot:cell(index)="data"><!-- 行号 -->
                   {{((ps.pageNum-1)*ps.pageSize)+ data.index + 1 }}
              </template>
              <template v-slot:cell(op)="data">
	               <button class="bt bt-danger"  @click="doRemove(data.index)"><i class="fa fa-minus"></i>删除</button>
	               <button class="bt bt-primary" @click="toEdit(data.index)">  <i class="fa fa-edit"></i> 编辑</button>
	               <button class="bt bt-success" @click="toView(data.index)">  <i class="fa fa-file-text-o"></i> 查看</button>
              </template>
		</b-table>
		<div class="text-right">
			<b-pagination aria-controls="listTable"  v-model="ps.pageNum" :total-rows="ps.total" :per-page="ps.pageSize"  align="right" @change="listPage" size="sm" >
			  <template v-slot:first-text><span class="text-primary">首页</span></template>
			  <template v-slot:last-text> <span class="text-primary">末页 </span></template>
			</b-pagination>
			
			<!-- 
			pageNum:{{ps.pageNum}}/ total:{{ps.total}}/pageSize:{{ps.pageSize}}
			<b-pagination aria-controls="listTable"  v-model="ps.pageNum" :total-rows="ps.total" :per-page="ps.pageSize"  align="right" @change="listPage" size="sm" >
			  <template v-slot:first-text><span class="text-primary">首页</span></template>
			  <template v-slot:last-text> <span class="text-primary">末页 </span></template>
			</b-pagination> -->
			<div >共{{parseInt((ps.total/ps.pageSize)+1)}}页,{{ps.total}}条</div>
       </div>
       
</div>
</div>
</div>

<script>
function _init (context) {	
	return {
		 mixins: [appList] 
		,data:function(){return	{
		        fields: [ //字段描述
		        	{
			              key: 'index',
			              label: '行号'
			              ,sortable: false
			              ,thStyle:' width:80px ' //th 样式
			              
			        },
		            {
		              key: 'id'
		              ,label: '主键'
		              ,sortable: false
		              //,thClass:' bg-primary text-white'
		            },
		            {
		              key: 'name',
		              label: '名称'
		              ,sortable: false
		              //,thClass:' bg-primary text-white'
		            },
		            {
		              key: 'Address',
		              label: '地址'
		              ,sortable: false
		              //,thClass:' bg-primary text-white'
		            },
		            {
		              key: 'sex',
		              label: '性别'
		              ,sortable: false
		              //,thClass:' bg-primary text-white'
		            },
		            {
		              key: 'work',
		              label: '工作'
		              ,sortable: false
		              //,thClass:' bg-primary text-white'
		            },
		            {
			              key: 'op',
			              label: '操作'
			              //,thStyle:' width:80px ' //th 样式
			              
			        }
		         ]
	}}//data
	,methods:{
		 getListPageUrl:function(){
			return  "/demo/listPage";
		 },
		 getDoRemoveUrl:function(){
			return "/demo/deleteByIds";
		 }
	}
  }
}
</script>

